<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
.headSearch {
	padding: 0 0 0 0.75rem;
}
.headSearch .searchIco {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	width: 1rem;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.headSearch .searchInput {
	background: #f5f5f5;
	padding: 0 0.5rem 0 2.25rem;
	height: 1.6rem;
	border-radius: 0.8rem;
	font-size: 0.7rem;
	color: #333;
}
.cancel {
	padding: 0 0.75rem;
	font-size: 0.8rem;
}
</style>
</head>

<body>
	<div id="topBox">
		<div class="aui-border-b" id="header">
			<div class="headSearch aui-flex-col aui-flex-middle">
				<div class="flex-auto relative">
					<form action="" id="searchForm">
					<div class="searchIco"><img src="../../image/common/03.png" alt=""></div>
					<input type="search" class="searchInput" placeholder="搜索商品" id="searchInput" onkeyup="delBtnCheck();">
					</form>
					<div class="inputDel aui-hide" tapmode onClick="inputDel();"></div>
				</div>
				<div class="cancel" tapmode onClick="api.closeWin();">取消</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var headerH;
    apiready = function() {
        api.parseTapmode();
		var header = $api.byId('topBox');
        $api.fixStatusBar(header);
        headerH = $api.offset($api.byId('topBox')).h;
        api.openFrame({
            name: 'search_frm',
            url: 'search_frm.html',
            rect: {
                x: 0,
                y: headerH,
                w: 'auto',
                h: 'auto'
            },
			bgColor: '#f5f5f5',
			useWKWebView: true,
			bounces: true,
            pageParam: api.pageParam
        });
		$$('#searchInput').focus();
	};

//点击标签后 输入框里显示相应标签
function setVal(txt){
	$$('#searchInput').val(txt);
	delBtnCheck();
	$$('#searchForm').submit();
}
//检测输入框是否显示删除按钮
function delBtnCheck(){
	if( $$('#searchInput').val() ){
		$$('.inputDel').removeClass('aui-hide');
	}else{
		$$('.inputDel').addClass('aui-hide');
	}
}
//点击清空输入框
function inputDel(){
	$$('.inputDel').addClass('aui-hide');
	$$('#searchInput').focus();
	$$('#searchInput').val('');
}
//搜索
$$('#searchForm').submit(function(){
	$$('#searchInput').blur();
	var s = $$('#searchInput').val();
	if( !s ){
		return;
	}
	api.execScript({
		frameName: 'search_frm',
		script:'searchFn("'+ s +'");'
	});
	return false;
});
//切换排序是否显示
// function showSort(n){
// 	if(n>0){
// 		$$('.sortBox').removeClass('aui-hide');
// 	}else{
// 		$$('.sortBox').addClass('aui-hide');
// 	}
// 	headerH = $api.offset($api.byId('topBox')).h;
// 	api.setFrameAttr({
// 		name: 'search_frm',
// 		rect: {
// 			y: headerH
// 		},
// 	});
// }

</script>
</html>
